<template>
  <div class="body-box">
    <div class="sign_box">
      <!-- 左侧姓名性别... -->
      <div class="box_left">
        <p class="p_tit_one">
          <span style="color: red">*</span> 绑定公司名称 :
        </p>
        <el-input v-model="input" placeholder="请输入公司名称"></el-input>
        <p class="p_tit"><span style="color: red">*</span> 姓名 :</p>
        <el-input v-model="input" placeholder="请输入姓名"></el-input>
        <p class="p_tit"><span style="color: red">*</span> 身份证号 :</p>
        <el-input v-model="input" placeholder="请输入法人身份证号"></el-input>
      </div>
      <!-- 右侧头像.... -->
      <div class="box_right">
        <p class="p_tit_one"><span style="color: red">*</span> 头像 :</p>
        <div class="avatar_box"><Avatar></Avatar></div>
        <div class="restrict_size">
          <p class="p_tit_one"><span style="color: red">*</span> 职位 :</p>

          <el-select v-model="value" placeholder="请选择职位">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="sign_btn">
      <el-button type="primary">注册</el-button>
    </div>
  </div>
</template>

<script>
import Avatar from "../../../components/avatar.vue";
export default {
  // 组件名称
  name: "Login",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    Avatar,
  },
  // 组件状态值
  data() {
    return {
      input: "",
      ele: "1", // 性别选择
      options: [
        {
          value: "1",
          label: "总经理(总裁)",
        },
        {
          value: "2",
          label: "总经理",
        },
        {
          value: "3",
          label: "人力资源总监",
        },
        {
          value: "4",
          label: "财务总监(CFO)",
        },
        {
          value: "5",
          label: "营销总监",
        },
        {
          value: "6",
          label: "市场总监(CMO)",
        },
        {
          value: "7",
          label: "销售总监",
        },
      ],
      value: "",
    };
  },
  // 组件初始化
  created() {},
  // 组件实例挂载完毕
  mounted() {},
  //销毁事件
  destroyed() {},
  // 组件方法
  methods: {
    handelEle(num) {
      this.ele = num;
    },
  },
};
</script>

<style scoped lang="less">
//下拉框样式
/deep/.el-select {
  margin-top: 10px;
}

//.sign_box下的内容
.box_left {
  margin-left: 10%;
  width: 28%;
  height: 100%;
  padding-top: 10px;
  // 性别选择
  .sex_box {
    width: 100%;
    display: flex;
    margin-top: 8px;
    font-size: 14px;
    .Select {
      min-width: 70px;
      min-height: 30px;
      border-radius: 5px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #c4e1fe;
      background-color: #e6f1fc;
      cursor: pointer;
    }
    .Unchecked {
      min-width: 70px;
      min-height: 30px;
      border-radius: 5px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #c4e1fe;
      background-color: #ffffff;
      cursor: pointer;
    }
    div:nth-child(2) {
      margin-left: 20px;
    }
  }
}
// 右侧身份验证
.box_right {
  width: 38%;
  height: 100%;
  margin-left: 20%;
  padding-top: 10px;
}
//推荐码
.Referral_code {
  width: 70%;
}
// 头像
.avatar_box {
  width: 100%;
  height: 133px;
  margin-top: 10px;
}
// 职位选择
.restrict_size {
  width: 80%;
  margin-top: 10px;
}
// 标题
.p_tit_one {
  font-size: 18px;
  margin-top: 0px;
}
.p_tit {
  font-size: 18px;
  margin-top: 20px;
}
// input框
.el-input {
  margin-top: 10px;
  // border: 2px solid #4095e5;
  // border-radius: 5px;
}
/deep/.el-input__inner {
  // height: 35px;
  // line-height: 35px;
  // font-size: 16px;
  // border: none !important;
}

// 邮箱验证
.placeholder {
  width: 160px;
  border: 2px solid #4095e5;
  height: 35px;
  margin-top: 10px;
  margin-left: 10px;
  text-align: center;
  border-radius: 5px;
  color: #489ae6;
  font-size: 15px;
  line-height: 35px;
  font-weight: 500;
  cursor: pointer;
}
// 出生年月日
.Be_born {
  width: 50px;
  height: 35px;
  border: 2px solid #4095e5;
  margin-top: 10px;
  border-radius: 5px;
  margin-left: 15px;
}
// 中心白色区域
.body_box {
  height: 100%;
  width: 100%;
  display: flex;
}
.sign_box {
  width: 100%;
  min-height: 400px;
  display: flex;
}
.sign_btn {
  width: 100%;
  min-height: 50px;
  display: flex;
  .el-button {
    margin: auto;
    width: 80px;
  }
}
</style>
